{% assign data = section.settings %}
<div class="block_categories_list">
    <div class="container_wrapper">
        <div class="{% if data.is_hr %}show_hr{% endif %}">
            {% include 'title', title: data.block_title,detaile: data.block_detail %}
            <div class="content">
                <ul class="categories_ul">
                    {%- for block in section.blocks -%}
                    {%- if block.text != '' -%}
                    <li>
                        
                        <h2 class="title"><a href="{{block.link | setUrlDataFrom:data_from}}">{{block.text}}</a></h2>
                        <div class="popup-view">
      											{% include 'lazy_img', src:block.image.src,  alt:block.image.alt %}
                        </div>
                    </li>
                    {%- endif -%}
                    {%- endfor -%}
                </ul>
                
            </div>
        </div>
       
    </div>
</div>
<script type="text/javascript">
(function(){$(".block_categories_list .content .categories_ul li h2 a").on('mousemove', function(e) {
    e.stopPropagation();
    $(this).parent().parent().addClass('active').siblings().removeClass('active');
    $('.block_categories_list .popup-view').css({'left': e.offsetX, 'top': e.offsetY});
})

$(".block_categories_list .content .categories_ul li h2 a").on('mouseleave', function(e) {
    e.stopPropagation();
    $(this).parent().parent().removeClass('active')
    
})
})()
</script>
{% schema %}
{
	"tag": "",
	"class": "block_categories_list",
	"icon": "icon-zhuanjishangpin",
	"is_global": false,
	"name": {
		"zh_CN": "类别列表",
		"en_US": "Category list"
	},
	"max_blocks": "10",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "是否显示分割线",
				"en_US": "Show split line"
			},
			"default": true,
			"id": "is_hr"
		},
		{
			"type": "card_input",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"id": "block_title",
			"default": ""
		},
		{
			"type": "card_text_editor",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"id": "block_detail",
			"default": ""
		}
	],
	"blocks": [
		{
			"name": {
				"zh_CN": "类别列表",
				"en_US": "Category list"
			},
			"type": "block-item",
			"settings": [
				{
					"type": "card_image",
					"label": {
						"zh_CN": "图片",
						"en_US": "Image"
					},
					"default": {
						"src": "",
						"alt": ""
					},
					"info": {
						"zh_CN": "建议宽度1000px以上，高度自适应",
						"en_US": "Recommended width more than 1000px, height adaptive"
					},
					"id": "image"
				},
				{
					"type": "card_input",
					"label": {
						"zh_CN": "跳转文字",
						"en_US": "Jump text"
					},
					"id": "text",
					"default": ""
				},
				{
					"type": "card_page_link",
					"label": {
						"zh_CN": "跳转链接",
						"en_US": "Jump links"
					},
					"default": {
						"type": "",
						"title": "",
						"url": ""
					},
					"id": "link"
				}
			]
		}
	],
	"default": {
		"settings": {
			"block_title": "",
			"block_detail": "CATEGORIES",
			"is_hr": true
		},
		"blocks": [
			{
				"image": {
					"src": "",
					"alt": ""
				},
				"text": "New Arrivals",
				"link": {
					"type": "",
					"title": "",
					"url": ""
				},
				"block_type": "block-item"
			},
			{
				"image": {
					"src": "",
					"alt": ""
				},
				"text": "Bags",
				"link": {
					"type": "",
					"title": "",
					"url": ""
				},
				"block_type": "block-item"
			},
			{
				"image": {
					"src": "",
					"alt": ""
				},
				"text": "Hats",
				"link": {
					"type": "",
					"title": "",
					"url": ""
				},
				"block_type": "block-item"
			}
		]
	}
}
{% endschema %}